<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/html">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">


    <title>点位信息</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico">
    <link href="${ctx!}/assets/css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="${ctx!}/assets/css/font-awesome.css?v=4.4.0" rel="stylesheet">

    <link href="${ctx!}/assets/css/plugins/bootstrap-table/bootstrap-table.min.css" rel="stylesheet">

    <link href="${ctx!}/assets/css/animate.css" rel="stylesheet">
    <link href="${ctx!}/assets/css/style.css?v=4.1.0" rel="stylesheet">
    <link href="${ctx!}/assets/css/admin-main.css" rel="stylesheet">

    <link rel="stylesheet" href="${ctx!}/assets/bower_components/amazeui/dist/css/amazeui.min.css"/>
    <link rel="stylesheet" href="${ctx!}/assets/css/colddemo.css">
    <style>

        #deviceDetailInfo label{
            width: 100px;
        }

        .clicklabel{
            position: absolute;
            /*top: 95.3625px;
            left: 56.08px;*/
            background: #173059;
            color: white;
            border: solid 1px #2056b1;
            opacity: 0.8;
            width: 78px;
            height: 38px;
            font-size: 8px;
            white-space: nowrap;
            text-align: center;
            line-height: 38px;
        }
        .clicklabel:hover {
            background: #264d8e;
        }
    </style>

</head>

<body class="gray-bg">
<div class="tabe_div"  style="padding-right: 0">
    <p class="p_line text_ient" ></p>
    <div style="display: inline" >
        <@shiro.hasPermission name="system:project:index">
        <a href="#" class="a_add" id="back">返回</a>
        </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="display_else_box" onclick="display_else();">隐藏其他点位</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="startConf">配置</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="modifyConf">微调</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="resetConf" >重置</a>
    </@shiro.hasPermission>
    <@shiro.hasPermission name="system:project:edit">
    <a href="#" class="a_add" id="stopConf" >保存</a>
    </@shiro.hasPermission>
    </div>

    <p class="p_line text_ient" ></p>
    <div>
        <form  id="frm" method="post" action="${ctx!}/admin/device/display/edit">
            <input type="hidden" id="id" name="id" value="${currDevice.id}">
            <input type="hidden" id="display" name="display" value="${currDevice.display}">
            <input type="hidden" id="coordinateX" name="coordinateX" value="${device.coordinateX}">
            <input type="hidden" id="coordinateY" name="coordinateY" value="${device.coordinateY}">
        </form>
    </div>
    <div>
        <img style="height: auto; width: 100%" src="${ctx}${currDevice.project.image}" alt="" id="confPic">
    </div>
</div>
<div class="wrapper wrapper-content  animated fadeInRight">
    <table  id="table_list" class="table_style table-striped" style="margin: 0 auto" >
    </table>
</div>

<!-- 全局js -->
<script src="${ctx!}/assets/js/jquery.min.js?v=2.1.4"></script>
<script src="${ctx!}/assets/js/bootstrap.min.js?v=3.3.6"></script>

<!-- Bootstrap table -->
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/bootstrap-table-mobile.min.js"></script>
<script src="${ctx!}/assets/js/plugins/bootstrap-table/locale/bootstrap-table-zh-CN.min.js"></script>

<!-- Peity -->
<script src="${ctx!}/assets/js/plugins/peity/jquery.peity.min.js"></script>

<script src="${ctx!}/assets/js/plugins/layer/layer.min.js"></script>

<#--图片-->
<#--<script src="${ctx!}/assets/bower_components/jquery/dist/jquery.min.js"></script>-->
<script src="${ctx!}/assets/bower_components/amazeui/dist/js/amazeui.min.js"></script>
<script src="${ctx!}/assets/bower_components/MessengerJS/messenger.js"></script>
<script src="${ctx!}/assets/bower_components/layer/layer.js"></script>

<!-- 自定义js -->
<script src="${ctx!}/assets/js/content.js?v=1.0.0"></script>
<#--<script src="${ctx!}/assets/js/adminPicConfig.js"></script>-->

<script>
    console.log(123456)
    $(document).ready(function() {

        confPicPos = $("#confPic").offset();
        confPicPos["width"] = $("#confPic").width();
        confPicPos["height"] = $("#confPic").height();
        deltax = 80/2, deltay = 40/2;
        <#if (devices?size > 0)>
        <#list devices as device>
            <#--var device= ${device};-->
            var id;
            if(${device.id} != ${currDevice.id})
                id = "other-device";
            else
                id = "device${currDevice.id}";

            <#if device.display==1>
                drawLabel(${device.coordinateX}*confPicPos.width, ${device.coordinateY}*confPicPos.height, id,"${device.name}");
            </#if>
        </#list>
        $("#device${currDevice.id}").removeClass("other-device");
        </#if>
    });

    function back(){
        $("#navbar-header-title",window.parent.document).html("${currDevice.project.name}");
        window.location.href = '${ctx!}/admin/device/index/${currDevice.project.id}';
    }

    var isAdvanced = false;

    function display_else() {
        isAdvanced = !isAdvanced;
        var device_span = $(".other-device");
        if(isAdvanced){
            $("#display_else_box").text("显示其他点位");
            if(device_span){
                device_span.each(function(key,value){
                    $(this).attr("hidden", "hidden");
                });
            }
        }
        else{
            $("#display_else_box").text("隐藏其他点位");
            if(device_span){
                device_span.each(function(key,value){
                    $(this).removeAttr("hidden");
                });
            }
        }
    }



    var confPicPos = $("#confPic").offset();
    confPicPos["width"] = $("#confPic").width();
    confPicPos["height"] = $("#confPic").height();
    var deltax = 80/2, deltay = 40/2;

    function drawLabel(x,y,id,title) {
        var top_value = document.getElementById("confPic").offsetTop + document.body.scrollTop;
        var left_value = document.getElementById("confPic").offsetLeft; //left
        var _labelhtml = '<span id="'+id+'" style="top:'+(top_value+y-deltay)+'px;left: '+(left_value+x-deltax)+'px" class="clicklabel other-device">'+title+'</span>';
        $(_labelhtml).insertAfter('#confPic');
        console.log((top_value+y-deltay));
    }

    $(document).ready(function () {
        function DragDlg(){
            var x = 0;
            var y = 0;
            var l = 0;
            var t = 0;
            var isDown = false;
            //鼠标按下事件
            $("#device${currDevice.id}").bind("mousedown",function(e) {
                //获取x坐标和y坐标
                x = e.clientX;
                y = e.clientY;

                //获取左部和顶部的偏移量
                var helperdialogwrapper =$("#device${currDevice.id}");
                l = helperdialogwrapper.offset().left;
                t = helperdialogwrapper.offset().top;
                //开关打开
                isDown = true;
                //设置样式
            });
            //鼠标移动
            window.onmousemove = function(e) {
                if (isDown == false) {
                    return;
                }
                //获取x和y
                var nx = e.clientX;
                var ny = e.clientY;
                //计算移动后的左偏移量和顶部的偏移量
                var nl = parseInt(l)+(parseInt(nx) -parseInt(x));
                var nt = parseInt(t)+(parseInt(ny) -parseInt(y));
                sss=parseInt(nx) -parseInt(x);
                lll=parseInt(ny) -parseInt(y);
//这里设置offset而不是css，因为获取时是根据offset获取的偏移量
                $("#device${currDevice.id}").offset({top:nt,left:nl});
            }
            //鼠标抬起事件
            $("#device${currDevice.id}").bind("mouseup",function() {
                        //开关关闭
                        isDown = false;
                        //存储新坐标
                        deviceOffset = $("#device${currDevice.id}").offset();
                        console.log(deviceOffset.left);
                        console.log(deviceOffset.top);
                        var xPercent = ((deviceOffset.left-document.getElementById("confPic").offsetLeft+40)/confPicPos.width).toFixed(4);
                        var yPercent = ((deviceOffset.top-document.getElementById("confPic").offsetTop-document.body.scrollTop+20)/confPicPos.height).toFixed(4);
                        $("#coordinateX").val(xPercent);
                        $("#coordinateY").val(yPercent);
                    }
            );
        }

        $("#startConf").on('click',function () {
            $('#confPic').on('click',function (e) {
                var xPercent = (e.offsetX/confPicPos.width).toFixed(4);
                var yPercent = (e.offsetY/confPicPos.height).toFixed(4);
                var panel = document.getElementById("device${currDevice.id}");
                if(panel) {
                    panel.parentNode.removeChild(panel);
                }
                $("#display").val(true);
                $("#coordinateX").val(xPercent);
                $("#coordinateY").val(yPercent);
                drawLabel(xPercent*confPicPos.width,yPercent*confPicPos.height, "device${currDevice.id}","${currDevice.name}");
                $("#device${currDevice.id}").removeClass("other-device");
            })
        });

        $("#modifyConf").on('click', function () {
            DragDlg();
        });

        $("#back").on('click',function () {
            $("#navbar-header-title",window.parent.document).html("${currDevice.project.name}&nbsp/&nbsp点位管理");
            window.location.href = '${ctx!}/admin/device/index/${currDevice.project.id}';

        });

        $("#stopConf").on('click',function () {
            //unbind img event
            $('#confPic').off('click');
            console.log($("#frm").serialize());
            $.ajax({
                type: "POST",
                dataType: "json",
                // contentType:"application/json",
                url: "${ctx!}/admin/device/display/edit",
                data: $("#frm").serialize(),
                success: function(msg){
                    layer.msg(msg.message, {time: 2000},function(){
                        // var index = parent.layer.getFrameIndex(window.name); //先得到当前iframe层的索引
                        // parent.layer.close(index);
                    });
                }
            });
        });

        $("#resetConf").on('click',function () {
            $("#display").val(false);
            $("#device${currDevice.id}").remove();
        });
    });


</script>


</body>

</html>
